<template>
  <div id="home">
    <img id="bg" :src="this.imgUrl" alt="bg" />
    <i
      type="primary"
      class="bg-img iconfont icon-huanbeijing"
      @click="changeBgImg"
    ></i>
    <HeaderBox
      :hasLogin="hasLogin"
      @loginSuccess="handleLoginSuccess"
      @loginOut="handleLoginOut"
    ></HeaderBox>
    <SearchBox></SearchBox>
    <NavCollection v-if="hasLogin"></NavCollection>
  </div>
</template>

<script>
import SearchBox from "@/components/SearchBox.vue";
import HeaderBox from "@/components/HeaderBox.vue";
import NavCollection from "@/components/NavCollection.vue";
import { getToken } from "@/utils/token.js";
export default {
  name: "Home",
  components: {
    SearchBox,
    NavCollection,
    HeaderBox,
  },
  data() {
    return {
      // 用户是否登录
      hasLogin: !!getToken(),
      imgUrl: require("@/assets/img/bg-2.jpg"),
      imgList: [
        require("@/assets/img/bg-1.jpg"),
        require("@/assets/img/bg-2.jpg"),
        require("@/assets/img/bg-3.jpg"),
        require("@/assets/img/bg-4.jpg"),
        require("@/assets/img/bg-5.jpg"),
        require("@/assets/img/bg-6.jpg"),
        require("@/assets/img/bg-7.jpg"),
        require("@/assets/img/bg-8.jpg"),
      ],
    };
  },
  methods: {
    /** 处理登录成功逻辑 */
    handleLoginSuccess() {
      this.hasLogin = true;
    },
    /** 处理退出登录逻辑 */
    handleLoginOut() {
      this.hasLogin = false;
    },
    changeBgImg() {
      const randIndex = Math.floor(Math.random() * this.imgList.length);
      this.imgUrl = this.imgList[randIndex];
    },
  },
};
</script>

<style>
#home {
  height: 100%;
}
#bg {
  z-index: -1;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bg-img {
  position: absolute;
  top: 14px;
  left: 97.15%;
  color: white;
}
</style>
